<template>
  <div class="home">
    <Header v-py="10" class="header">
      <div class="header-left" slot="left">
        <i class="icon icon-scan"></i>
        <span>扫一扫</span>
      </div>
      <router-link to="/search" class="header-center" slot="center">
        <div class="pic">
          <i class="icon icon-search"></i>
        </div>
        <input type="text" placeholder="雅马哈吉他">
      </router-link>
      <div class="header-right" slot="right">
        <i class="icon icon-message"></i>
        <span>消息</span>
      </div>
    </Header>
    <swiper class="banner" :options="swiperOptions">
      <swiper-slide class="banner-item" v-for="banner in banners" :key="banner.pic" :style="{
          background: `url(${banner.pic}) no-repeat center`,
          backgroundSize: 'cover'
        }" />
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <nav class="nav">
      <router-link class="nav-item" to="/">
        <i class="icon icon-musical-mall"></i>
        <span>乐器商城</span>
      </router-link>
      <router-link class="nav-item" to="/">
        <i class="icon icon-huodong"></i>
        <span>活动</span>
      </router-link>
      <router-link class="nav-item" to="/">
        <i class="icon icon-video"></i>
        <span>视频</span>
      </router-link>
      <router-link class="nav-item" to="/">
        <i class="icon icon-teach"></i>
        <span>教材</span>
      </router-link>
    </nav>
    <div v-my class="home-plane1 plane">
      <Row class="top">
        <Col class="plane-item xsqg">
        <div class="title">
          <big>限时抢购</big>
          <countdown class="count-down" :time="30 * 60 * 1000">
            <template slot-scope="props">{{ props.hours }}:{{ props.minutes }}:{{ props.seconds }}</template>
          </countdown>
        </div>
        <p class="desc">手快有 手慢无喔</p>
        <Row v-pt justify="space-around">
          <Col v-p>
          <img v-lazy="require('../assets/img/home/palen1-01.jpg')" alt="">
          </Col>
          <Col v-p>
          <img v-lazy="require('../assets/img/home/palen1-02.jpg')" alt="">
          </Col>
        </Row>
        </Col>
        <Col class="plane-item zkzc">
        <div class="title">
          <big>折扣专场</big>
        </div>
        <p class="desc">领券享折上折</p>
        <Row v-pt>
          <Col v-p>
          <img v-lazy="require('../assets/img/home/palen1-03.jpg')" alt="">
          </Col>
          <Col v-p>
          <img v-lazy="require('../assets/img/home/palen1-04.jpg')" alt="">
          </Col>
        </Row>
        </Col>
      </Row>
      <Row>
        <Col class="plane-item">
          <div class="title">
            <big>乐配</big>
          </div>
          <p class="desc">乐器的配件全都有</p>
          <Row justify="center" align="center" v-mx="50">
            <img v-lazy="require('../assets/img/home/palen1-05.jpg')" alt="">
          </Row>
        </Col>
           <Col class="plane-item">
          <div class="title">
            <big>排行榜</big>
          </div>
          <p class="desc">大家都在买什么</p>
          <Row justify="center" align="center" v-mx="50">
            <img v-lazy="require('../assets/img/home/palen1-06.jpg')" alt="">
          </Row>
        </Col>
        <Col class="plane-item">
          <div class="title">
            <big>外出旅行</big>
          </div>
          <p class="desc">带什么乐器去旅行</p>
           <Row justify="center" align="center" v-my="30" v-mx="50">
            <img v-lazy="require('../assets/img/home/palen1-07.jpg')" alt="">
          </Row>
        </Col>
      </Row>
    </div>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
export default {
  name: "home",
  data() {
    return {
      banners: [
        {
          pic: require("../assets/img/home/banner1.jpg")
        },
        {
          pic: require("../assets/img/home/banner2.jpg")
        },
        {
          pic: require("../assets/img/home/banner3.jpg")
        }
      ],
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination"
        }
      }
    };
  },
  components: {
    Header
  }
};
</script>
